import { PenChildProps } from "@/types";
import { ColorPicker, Input, InputNumber, Select, Space, Switch } from "antd";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";

export function PenText({ penOptions, setPenValue }: PenChildProps) {
  return (
    <>
      <Space
        style={{ padding: "10px" }}
        className={"w-full"}
        direction="vertical"
      >
        <FormRowCol label="内容">
          <Input.TextArea
            value={penOptions.text}
            onChange={(e) => {
              setPenValue("text", e.target.value);
            }}
          />
        </FormRowCol>
        <FormRowCol label={"字体名称"}>
          <Select
            className={"w-full"}
            value={penOptions.fontFamily}
            options={[
              { label: "serif", value: "serif" },
              { label: "sans-serif", value: "sans-serif" },
              { label: "monospace", value: "monospace" },
              { label: "cursive", value: "cursive" },
              { label: "fantasy", value: "fantasy" },
              { label: "system-ui", value: "system-ui" },
              { label: "ui-serif", value: "ui-serif" },
              { label: "ui-sans-serif", value: "ui-sans-serif" },
              { label: "ui-monospace", value: "ui-monospace" },
              { label: "ui-rounded", value: "ui-rounded" },
              { label: "emoji", value: "emoji" },
              { label: "math", value: "math" },
              { label: "fangsong", value: "fangsong" },
            ]}
            onSelect={(value) => {
              setPenValue("fontFamily", value);
            }}
          />
        </FormRowCol>
        <FormRowCol label="字体大小">
          <InputNumber
            className={"w-full"}
            value={penOptions.fontSize}
            onChange={(value) => setPenValue("fontSize", value)}
          />
        </FormRowCol>
        <FormRowCol label="文字颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.textColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("textColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="文字浮动颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.hoverTextColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("hoverTextColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="文字选中颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.activeTextColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("activeTextColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="文字背景">
          <ColorPicker
            className={"w-full"}
            value={penOptions.textBackground}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("textBackground", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label={"倾斜"}>
          <Select
            className={"w-full"}
            value={penOptions.fontStyle}
            options={[
              { label: "正常", value: "normal" },
              { label: "倾斜", value: "italic" },
            ]}
            onSelect={(value) => {
              setPenValue("fontStyle", value);
            }}
          />
        </FormRowCol>
        <FormRowCol label={"加粗"}>
          <Select
            className={"w-full"}
            value={penOptions.fontWeight}
            options={[
              { label: "正常", value: 400 },
              { label: "加粗", value: 700 },
            ]}
            onSelect={(value) => {
              setPenValue("fontWeight", value);
            }}
          />
        </FormRowCol>
        <FormRowCol label={"水平对其"}>
          <Select
            className={"w-full"}
            value={penOptions.textAlign}
            options={[
              { label: "左对齐", value: "left" },
              { label: "居中", value: "center" },
              { label: "右对齐", value: "right" },
            ]}
            onSelect={(value) => {
              setPenValue("textAlign", value);
            }}
          />
        </FormRowCol>
        <FormRowCol label={"垂直对其"}>
          <Select
            className={"w-full"}
            value={penOptions.textBaseline}
            options={[
              { label: "顶部对齐", value: "top" },
              { label: "居中", value: "middle" },
              { label: "底部对齐", value: "bottom" },
            ]}
            onSelect={(value) => {
              setPenValue("textBaseline", value);
            }}
          />
        </FormRowCol>
        <FormRowCol label="行高">
          <InputNumber
            className={"w-full"}
            value={penOptions.lineHeight}
            onChange={(value) => setPenValue("lineHeight", value)}
          />
        </FormRowCol>
        <FormRowCol label={"换行"}>
          <Select
            className={"w-full"}
            value={penOptions.whiteSpace}
            options={[
              { label: "默认", value: "" },
              { label: "不换行", value: "nowrap" },
              { label: "换行符换行", value: "pre-line" },
              { label: "永远换行", value: "break-all" },
            ]}
            onSelect={(value) => {
              setPenValue("whiteSpace", value);
            }}
          />
        </FormRowCol>
        <FormRowCol label="宽度">
          <InputNumber
            className={"w-full"}
            value={penOptions.textWidth}
            onChange={(value) => setPenValue("textWidth", value)}
          />
        </FormRowCol>
        <FormRowCol label="高度">
          <InputNumber
            className={"w-full"}
            value={penOptions.textHeight}
            onChange={(value) => setPenValue("textHeight", value)}
          />
        </FormRowCol>
        <FormRowCol label="水平偏移">
          <InputNumber
            className={"w-full"}
            value={penOptions.textLeft}
            onChange={(value) => setPenValue("textLeft", value)}
          />
        </FormRowCol>
        <FormRowCol label="垂直偏移">
          <InputNumber
            className={"w-full"}
            value={penOptions.textTop}
            onChange={(value) => setPenValue("textTop", value)}
          />
        </FormRowCol>
        <FormRowCol label="超出省略">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.ellipsis}
            onChange={(checked) => {
              setPenValue("ellipsis", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol label="隐藏文字">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.hiddenText}
            onChange={(checked) => {
              setPenValue("hiddenText", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol
          label="保留小数"
          illustrate={
            "显示格式，undefined 显示原内容；0 显示整数；1 显示一位小数，依次类推。"
          }
        >
          <InputNumber
            className={"w-full"}
            value={penOptions.keepDecimal}
            onChange={(value) => setPenValue("keepDecimal", value)}
          />
        </FormRowCol>
        <FormRowCol label="下划线">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={Boolean(penOptions.textDecoration)}
            onChange={(checked) => {
              setPenValue("textDecoration", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol label="下划线颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.textDecorationColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("textDecorationColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="删除线">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={Boolean(penOptions.textStrickout)}
            onChange={(checked) => {
              setPenValue("textStrickout", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol label="删除线颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.textStrickoutColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("textStrickoutColor", hex);
            }}
          />
        </FormRowCol>
      </Space>
    </>
  );
}
